/* 重置默认样式 start */
body,div,h1,h2,h3,h4,h5,p,ul,ol,p{
  padding:0;
  margin:0;
  font-family:"Helvetica";
  -webkit-text-size-adjust:100%;
}

li{
  padding:0;
  margin:0;
  list-style:none;
}

h1,h2,h3,h4,h5{
  font-weight:normal;
}

img{
  vertical-align: top;
  border:none;
}

a,a:hover{
  text-decoration:none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

em,strong,i{
  font-style:normal;
  font-weight:normal;
}

input,button,select{
  border:none;
  -webkit-appearance: none;
  outline: none;
  padding:0;
}

html,body,#app,#addFriends,#home,#chat-room{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

@rem:46.875rem;

.position{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/*切换模板样式*/
.v-active-bg0{
  background:#fff8e5 url(../images/bg.png) no-repeat;
  background-size:100% 100%;
}

.v-active-bg1{
  background:#ffedf0 url(../images/bg.png) no-repeat;
  background-size:100% 100%;
}

.v-active-bg2{
  background:#dff1ff url(../images/bg.png) no-repeat;
  background-size:100% 100%;
}

.v-frame0{
  background:url(../images/frame0.png) no-repeat;
  background-size:100% 100%;
}

.v-frame1{
  background:url(../images/frame1.png) no-repeat;
  background-size:100% 100%;
}

.v-frame2{
  background:url(../images/frame2.png) no-repeat;
  background-size:100% 100%;
}

.v-index0{
  color:#c0610c;
  background:url(../images/index0.png) no-repeat right center;
  background-size:100% 100%;
}

.v-index1{
  color:#fff;
  background:url(../images/index1.png) no-repeat right center;
  background-size:100% 100%;
}

.v-index2{
  color:#1a79b0;
  background:url(../images/index2.png) no-repeat right center;
  background-size:100% 100%;
}

/* 添加好友 */
#addFriends{
  background:url(../images/addFriends_bg.png) no-repeat;
  background-size:100% 100%;
  .time{
    height:414/@rem;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    justify-content: center;
    text-align:center;
    color:#fff;
    .time_data{
      font-size:72/@rem;
      font-weight:normal;
    }
    .Lunarday{
      font-size:36/@rem;
    }
  }

  .friends{
    width:100%;
    height:auto;
    .apply{
      height:170/@rem;
      padding:0 30/@rem;
      transform:translateY(-20/@rem);
      -webkit-transform:translateY(-20/@rem);
      opacity:0;
      a{
        position:relative;
        display:inline-block;
        width:100%;
        padding:21/@rem 0;
        color:#fff;
        border-top:2px solid #49494e;
        .wechat{
          float:left;
          width:43/@rem;
          height:100%;
          margin-bottom:32/@rem;
          margin-right:22/@rem;
          img{
            width:43/@rem;
            height:43/@rem;
            margin-top:7/@rem;
          }
          span{
            line-height:62/@rem;
            font-size:32/@rem;
            color:#fff;
          }
        }

        .add_info{
          width:690/@rem;
          img{
            float:right;
            width:70/@rem;
            height:70/@rem;
            margin-right:7/@rem;
          }
          div{
            float:left;
            margin-left:20/@rem;
            p{
              line-height:36/@rem;
              font-size:26/@rem;
              span{
                display: inline-block;
                text-align:justify;
              }
              i{
                font-size:22/@rem;
                color:#6d6e71;
                margin-left:10/@rem;
              }
            }
            p:nth-of-type(2){
              font-size:24/@rem;
              color:#6d6e71;
            }
          }
        }
      }
    }

    .apply:nth-of-type(1){
      transition-delay:0.2s;
      -webkit-transition-delay:0.2s;
    }
  }
  .v-enter-to{
    transform:translateY(0) !important;
    -webkit-transform:translateY(0) !important;
    opacity:1 !important;
    transition:0.3s ease;
  }

}

/*个人信息内容*/
#home{
  background-color:#f5f5f5;
  .SayHello{
    height:114/@rem;
    padding:30/@rem 30/@rem;
    ul{
      display:flex;
      display:-webkit-flex;
      align-items:center;
      height:100%;
      background-color:#fff;
      li{
        font-size:30/@rem;
        color:#999;
        padding:0 30/@rem;
      }
    }
    .reply{
      display: block;
      width: 160/@rem;
      height: 56/@rem;
      line-height: 56/@rem;
      font-size: 28/@rem;
      color: #000;
      text-align: center;
      margin: 30/@rem auto 0;
      background-color: #f8f8f8;
      border-radius: 8/@rem;
      -webkit-border-radius: 8/@rem;
    }
  }

  .SetUp{
    display:block;
    width:100%;
    height:70/@rem;
    line-height:70/@rem;
    font-size:32/@rem;
    color:#333;
    text-indent:25/@rem;
    background-color:#fff;
    border-top:2px solid #e5e4e9;
    border-bottom:2px solid #e5e4e9;
  }

  .region{
    height:auto;
    background-color:#fff;
    margin-top:30/@rem;
    padding:0 30/@rem;
    border-top:2px solid #e5e4e9;
    border-bottom:2px solid #e5e4e9;
    div{
      height:76/@rem;
      line-height:76/@rem;
      font-size:32/@rem;
      span{
        margin-left:92/@rem;
      }
    }
    div:nth-of-type(1){
      border-top:2px solid #e5e4e9;
    }
    .photo{
      height:160/@rem;
      line-height:160/@rem;
      font-size:32/@rem;
      color:#333;
      border-top:2px solid #e5e4e9;
      border-bottom:2px solid #e5e4e9;
      ul{
        float:right;
        width:75%;
        height:100%;
        margin-left:20/@rem;
        li{
          float:left;
          height:160/@rem;
          align-items:center;
          display:flex;
          display:-webkit-flex;
          img{
            display:inline-block;
            width:110/@rem;
            height:110/@rem;
            margin-right:10/@rem;
          }
        }
      }
    }
  }

  .agree{
    display:block;
    width:646/@rem;
    height:78/@rem;
    line-height:78/@rem;
    font-size:34/@rem;
    color:#fff;
    text-align:center;
    margin:30/@rem auto 0;
    background-color:#19ad19;
    border-radius:8/@rem;
    -webkit-border-radius:8/@rem;
  }
}

#vux_view_box_body{
  .weui-panel{
    margin-top:30/@rem;
    border-top:2px solid #e5e4e9;
    border-bottom:2px solid #e5e4e9;
  }
  .weui-panel__bd{
    a{
      padding:30/@rem;
    }
    .weui-media-box__hd{
      width:120/@rem;
      height:120/@rem;
    }
    .weui-media-box__bd{
      .weui-media-box__title{
        font-size:32/@rem;
        margin-top:-60/@rem;
      }
      .weui-media-box__desc{
        font-size:28/@rem;
      }
    }
  }
}

/* 聊天内容 */
.ChatRoom{
  background-color:#f5f5f5;
  .swiper-container{
    height:90%;
    overflow:hidden;
    .swiper-wrapper{
      .room{
        width:94%;
        padding:21/@rem;
        .left,.right{
          position:relative;
          display:block;
          img{
            width:80/@rem;
            height:80/@rem;
            margin-top:12/@rem;
          }
          div{
            max-width:480/@rem;
            padding:12/@rem 0;
            word-wrap:break-word;
            text-align:justify;
            text-justify:distribute-all-lines;
            p{
              position:relative;
              line-height:34/@rem;
              font-size:24/@rem;
              padding:20/@rem;
              border-radius:8/@rem;
              -webkit-border-radius:8/@rem;
              span{
                position:absolute;
                top:20/@rem;
                width: 11/@rem;
                height: 23/@rem;
              }
            }
          }
        }
        .left{
          color:#333;
          img{
            float:left;
          }
          em{
            float:left;
            color:#c8c8cd;
          }
          div{
            float:left;
            width:580/@rem;
            height:auto;
            margin-left:20/@rem;
            padding-right:100/@rem;
            p{
              display:inline-block;
              background-color:#ffffff;
              border:2px solid #dddddd;
              img{
                float:right !important;
                width:120/@rem !important;
                height:120/@rem !important;
                background-color:#007aff;
                margin-top:-5/@rem;
              }
              span{
                left:-11/@rem;
                background:url(../images/transLeft.png) no-repeat;
                background-size:100% 100%;
              }
            }
          }
        }
        .right{
          img{
            float:right;
          }
          div{
            float:right;
            width:580/@rem;
            height:auto;
            margin-right:20/@rem;
            padding-left:100/@rem;
            p{
              float:right;
              background-color:#a0e759;
              border:2px solid #93c573;
              span{
                right:-10/@rem;
                background:url(../images/transRight.png) no-repeat;
                background-size:100% 100%
              }
            }
          }
        }
      }
    }
  }

  .text-input{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:78/@rem;
    padding:15/@rem 0;
    background-color:#ffffff;
    z-index:3;
    input{
      width:520/@rem;
      height:68/@rem;
      font-size:28/@rem;
      text-indent:30/@rem;
      margin-left:60/@rem;
      border:2px solid #e5e4e9;
      border-radius:8/@rem;
      -webkit-border-radius:8/@rem;
    }
    span{
      display:inline-block;
      width:114/@rem;
      height:68/@rem;
      line-height:68/@rem;
      font-size:28/@rem;
      color:#fff;
      text-align:center;
      margin-left:20/@rem;
      background-color:#1aac19;
      border-radius:10/@rem;
      -webkit-border-radius:10/@rem;
    }
  }
}

/*预约*/
.about{
  background:url(../images/about_bg.png) no-repeat;
  background-size:100% 100%;
  .about-info{
    position:absolute;
    bottom:46/@rem;
    left:50%;
    width:600/@rem;
    height:690/@rem;
    padding:45/@rem 40/@rem 63/@rem;
    background-color:#fff;
    margin-left:-340/@rem;
    div{
      height:152/@rem;
      p{
        line-height:75/@rem;
        font-size:30/@rem;
        span{
          display:inline-block;
          margin-left:70/@rem;
          color:mediumvioletred;
        }
      }
      input,select{
        width:100%;
        height:75/@rem;
        font-size:30/@rem;
        text-indent:30/@rem;
        background-color:#f7f7eb;
        border:2px solid #e6d3c8;
      }
    }
    button{
      display:block;
      width:406/@rem;
      height:116/@rem;
      font-size:30/@rem;
      color:#5e4121;
      background:url(../images/submit_bg.png) no-repeat;
      background-size:100% 100%;
      margin:106/@rem auto 0;
    }
  }
  .position{
    display:flex;
    display:-webkit-flex;
    align-items:center;
    background-color:rgba(0,0,0,0.5);
    p{
      width:520/@rem;
      height:78/@rem;
      line-height:78/@rem;
      font-size:30/@rem;
      text-align:center;
      background-color:rgba(255,255,255,0.8);
      border-radius:8/@rem;
      -webkit-border-radius:8/@rem;
      margin:0 auto;
    }
  }
}

/*上传图片*/
.Filename{
  .tab-style{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:72/@rem;
    line-height:72/@rem;
    background:url(../images/tab-style.png) no-repeat 46/@rem center;
    background-size:223/@rem 38/@rem;
    text-align:right;
    span{
      display:inline-block;
      width:90/@rem;
      height:30/@rem;
      line-height:30/@rem;
      font-size:20/@rem;
      color:#fff;
      text-align:center;
    }
    span:nth-of-type(1),span:nth-of-type(2){
      margin-right:32/@rem;
    }
    span:nth-of-type(1){
      background-color:#fde39f;
    }
    span:nth-of-type(2){
      background-color:#ffa4bd;
    }
    span:nth-of-type(3){
      margin-right:44/@rem;
      background-color:#a8bdf9;
    }
    .v-active{
      border:4px solid #ffffff;
    }
  }
  .people{
    position:relative;
    width:680/@rem;
    height:924/@rem;
    text-align:center;
    margin:72/@rem auto 0;
    img{
      width:640/@rem;
      height:728/@rem;
    }
    img:nth-of-type(2){
      position:absolute;
      top:0;
      left:21/@rem;
      margin-top:0;
    }
    .index{
      position:absolute;
      bottom:210/@rem;
      right:35/@rem;
      width:236/@rem;
      height:138/@rem;
      line-height:105/@rem;
      font-size:36/@rem;
      text-indent:42/@rem;
    }

    .title{
      position:absolute;
      bottom:50/@rem;
      left:10/@rem;
      width:404/@rem;
      height:106/@rem;
      background:url(../images/title.png) no-repeat;
      background-size:100% 100%;
    }
  }
  .upload{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:163/@rem;
    text-align:center;
    button{
      position:relative;
      top:5/@rem;
      width:373/@rem;
      height:74/@rem;
      font-size:28/@rem;
      color:#fff;
      background:url(../images/btn-bg.png) no-repeat;
      background-size:100% 100%;
      input{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:0;
      }
    }
    p{
      line-height:38/@rem;
      font-size:30/@rem;
      color:#002e5f;
      margin-top:40/@rem;
    }
  }
  .file_load{
    display:flex;
    display:-webkit-flex;
    align-items:center;
    background-color:rgba(0,0,0,0.5);
    div{
      width:300/@rem;
      height:200/@rem;
      background:url(../images/loading.gif) no-repeat;
      background-size:100% 100%;
      margin:0 auto;
    }
    .layer_text{
      display:none;
      width:420/@rem;
      height:auto;
      line-height:28/@rem;
      font-size:24/@rem;
      color:#c71585;
      padding:30/@rem;
      border-radius:8/@rem;
      -webkit-border-radius:8/@rem;
      background-color:#fff;
      margin:0 auto;
    }
  }
}

.result{
  .res{
    .frame{
      position:relative;
      width:682/@rem;
      height:924/@rem;
      margin:0 auto;
      .people{
        position:relative;
        width:680/@rem;
        height:924/@rem;
        text-align:center;
        margin:32/@rem auto 0;
        img{
          width:640/@rem;
          height:728/@rem;
        }
        img:nth-of-type(2){
          position:absolute;
          top:0;
          left:21/@rem;
          margin-top:0;
        }
        .index{
          position:absolute;
          bottom:210/@rem;
          right:35/@rem;
          width:236/@rem;
          height:138/@rem;
          line-height:105/@rem;
          font-size:36/@rem;
          text-indent:42/@rem;
        }
      }
      .index{
        position:absolute;
        bottom:210/@rem;
        right:35/@rem;
        width:236/@rem;
        height:138/@rem;
        line-height:105/@rem;
        font-size:36/@rem;
        text-indent:42/@rem;
        i{
          float:right;
          font-size:56/@rem;
          margin-right:35/@rem;
        }
      }
      .QR{
        position:absolute;
        bottom:14/@rem;
        left:20/@rem;
        width:184/@rem;
        height:168/@rem;
        text-align:center;
        img{
          display:inline-block;
          width:130/@rem;
          height:130/@rem;
        }
        p{
          line-height:40/@rem;
          font-size:22/@rem;
          color:#428eb8;
        }
      }
    }
  }
  .save{
    opacity:0;
    img{
      width:100%;
      height:100%;
    }
  }
  .res-btn{
    position:absolute;
    bottom:60/@rem;
    left:0;
    width:100%;
    height:126/@rem;
    text-align:center;
    p{
      display:inline-block;
      width:258/@rem;
      height:60/@rem;
      background:url(../images/pres.png) no-repeat;
      background-size:100% 100%;
    }
    a{
      display:inline-block;
      width:274/@rem;
      height:54/@rem;
      line-height:54/@rem;
      font-size:28/@rem;
      color:#fff;
      background:url(../images/btn-bg.png) no-repeat;
      background-size:100% 100%;
    }
  }
}

#canvas{
  display:none;
}
